<!-- 谋马超铁骑：选择不同项就‘破阵成功’ -->
<template>
  <div class="playA" v-if="playA === 0">
    <h4>马超请选择:</h4>
    <van-button @click="playA = 1">直取敌营：你获得其一张牌</van-button>
    <van-button @click="playA = 2">扰阵疲敌：你摸两张牌</van-button>
  </div>
  <div class="playB" v-else-if="playB === 0">
    <h4>对方请选择:</h4>
    <van-button @click="playB = 1">出阵迎敌：防止马超摸两张牌</van-button>
    <van-button @click="playB = 2">拱卫中军：防止马超获得你一张牌</van-button>
  </div>
  <div v-else>
    <h3>
      {{
        playA === playB
          ? playA === 1
            ? "破阵成功！获得其一张牌"
            : "破阵成功！摸两张牌"
          : "破阵失败"
      }}
    </h3>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const playA = ref<number>(0);
const playB = ref<number>(0);
</script>

<style scoped lang="scss">
div {
  padding: 0 20rem;
}
.playA,
.playB {
  .van-button {
    width: 100%;
  }
}
</style>
